<template>
  <div class="playlist-container">
    <!-- 热门歌单 -->
    <HotPlaylists />
    
    <!-- 我的歌单 -->
    <UserPlaylists />
    
    <!-- 我的收藏 -->
    <FavoritePlaylists />
  </div>
</template>

<script setup lang="ts">
import HotPlaylists from '@/components/PlayList/HotPlaylists.vue';
import UserPlaylists from '@/components/PlayList/UserPlaylists.vue';
import FavoritePlaylists from '@/components/PlayList/FavoritePlaylists.vue';

import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
</script>

<style lang="scss" scoped>
.playlist-container {
  padding: 24px;
  
  /* 统一所有标题样式 */
  :deep(h2) {
    color: var(--primary-color);
    font-size: 1.8em;
    margin-bottom: 28px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, var(--primary-color), var(--theme-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(to right, var(--theme-color), transparent);
      border-radius: 2px;
    }
  }
}
</style>